<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class=" form">
			<view class="box">
				<view class="line acea-row picker">
					<view class="tit"> 选择医院 </view>
					<input type="text" v-model="hospital_name" placeholder="请选择医院" placeholder-class="psc" disabled>
				</view>
				<navigator class="line acea-row picker" url="/pages/user/patient_management?isChoice=0">
					<view class="tit"> 就诊人 </view>
					<input type="text" v-model="patient.member_name" placeholder="请选择就诊人" placeholder-class="psc"
						disabled>
				</navigator>
				<view class="line acea-row">
					<view class="tit"> 年龄 </view>
					<input type="text" v-model="patient.age" placeholder="请输入年龄" placeholder-class="psc">
				</view>
				<view class="line acea-row picker" @click="department_picker_show = true">
					<view class="tit"> 就诊科室 </view>
					<input type="text" v-model="department_name" placeholder="请选择就诊科室" placeholder-class="psc" disabled>
				</view>
				<view class="line acea-row">
					<view class="tit"> 就诊时间 </view>
					<input type="text" v-model="list.selected_date" placeholder="请选择就诊时间" placeholder-class="psc"
						disabled />
				</view>
				<view class="line acea-row row-between-wrapper">
					<view class="tit"> 陪诊时间 </view>
					<u-radio-group placement="row" @change="accompanying_change" activeColor="#347DFE"
						v-if="time_slot == 2">
						<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in accompanying_time_list"
							:key="index" :label="item.value" :name="item.name" labelSize="14" labelColor="#000">
						</u-radio>
					</u-radio-group>
					<input type="text" value="全天" disabled v-else>
				</view>

				<view class="line acea-row">
					<view class="tit"> 预约人电话 </view>
					<input type="text" v-model="list.mobile" placeholder="请输入预约人电话" placeholder-class="psc">
				</view>
				<view class="line acea-row row-between-wrapper">
					<view class="tit"> 就诊人关系 </view>
					<!-- 		<u-radio-group placement="row" @change="relationship_change" activeColor="#347DFE">
						<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in relationship_list" :key="index"
							:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
						</u-radio>
					</u-radio-group> -->
					<input type="text" v-model="patient.relation" placeholder="请输入就诊人关系" placeholder-class="psc">
				</view>
				<view class="line acea-row">
					<view class="tit"> 备注 </view>
					<input type="text" v-model="list.remark" placeholder="请输入备注" placeholder-class="psc">
				</view>
			</view>

			<zysx></zysx>
		</view>
		<view class="bottom-box">
			<ysxy @radioCheck="radioCheck"></ysxy>
			<view class="btn-box">
				<view class="btn" @click="submit"> 立即下单￥{{list.price}} </view>
			</view>
		</view>

		<!-- 选择医院 -->
		<!-- 	<u-picker :show="hospital_picker_show" :columns="hospital_list" @confirm="hospital_confirm"
			@close="hospital_close"></u-picker> -->
		<!-- 就诊科室 -->
		<u-picker :show="department_picker_show" :columns="department_list" @confirm="department_confirm"
			@cancel="department_picker_show =false" @close="department_picker_show =false" keyName="department_name">
		</u-picker>
		<!-- 就诊时间 -->
		<!-- <u-datetime-picker :show="visit_time_show" v-model="visit" mode="datetime" @confirm="visit_time_confirm"
			@cancel="visit_time_cancel">
		</u-datetime-picker> -->
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '选择医院',
					'color': false,
				},
				// 就诊科室
				department_picker_show: false,
				department_list: [
					[]
				],
				// 陪诊时间
				accompanying_time_list: [{
					name: '上午',
					value: '上午',
				}, {
					name: '下午',
					value: '下午',
				}],
				isRead: false,
				hospital_name: '', //回显
				patient: '',
				department_name: '',
				time_slot: '', // 消耗时长
				list: {
					type: 4,
					hospital_id: '', //传	
					service_id: '',
					staff_id: '',
					department_id: '',
					selected_date: '',
					selected_time: '',
					mobile: '', //手机号
					member_id: '',
					remark: '',
					price: 298,
				}
			};
		},
		onLoad(option) {
			console.log("option", option);
			this.list.staff_id = uni.getStorageSync('staff_id');
			this.hospital_name = uni.getStorageSync('hospital_name');
			var hospital_id = uni.getStorageSync('hospital_id');
			this.list.hospital_id = hospital_id;
			this.list.selected_date = `${year}-${option.date}`;
			this.list.service_id = option.service_id;
			this.list.price = option.total_price;
			this.time_slot = option.time_slot;
			this.departmentLists(hospital_id);


		},
		onShow() {
			uni.$once('patient', (patient) => {
				this.patient = patient.patient;
				console.log("就诊人", this.patient);
				this.list.member_id = patient.patient.id;
			});
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async departmentLists(hospital_id) {
				const res = await this.$myRequest({
					url: '/api/hospital/departmentLists',
					data: {
						hospital_id: hospital_id,
						page: '',
						limit: '',
					}
				})
				this.department_list = [res.data.data];
				console.log("科室", this.department_list);
			},
			async createOrder() {
				this.list.openid = uni.getStorageSync('openid')
				if (this.time_slot == 3) {
					console.log("selected_time", this.list.selected_time);
					this.list.selected_time = '全天'
				}
				const res = await this.$myRequest({
					url: '/api/order/createOrder',
					data: this.list,
				})
				console.log("生成订单", res.data.data);
				var order_id = res.data.data.order_id;
				var service_name = res.data.data.service_name;
				if (res.data.status == 200) {
					uni.navigateTo({
						url: '/pages/user/payment?order_id=' + order_id + '&service_name=' + service_name +
							'&price=' + this.list.price
					})
				}
			},
			department_confirm(e) {
				console.log('confirm', e)
				this.department_name = e.value[0].department_name;
				this.list.department_id = e.value[0].id;
				this.department_picker_show = false
			},
			department_close() {
				this.department_picker_show = false;
			},

			accompanying_change: function(name) {
				console.log('selected_time', name);
				this.list.selected_time = name;
			},
			// relationship_change: function(name) {
			// 	console.log('relationship', name);
			// 	this.list.relationship = name;
			// },
			radioCheck() {
				this.isRead = true;
			},
			submit() {
				if (!this.isRead) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请阅读协议并同意'
					})
				} else {
					console.log(this.list);
					this.createOrder();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 100%;
		padding-bottom: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.box {
		padding: 0 30rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line .tit {
		color: #525252;
		width: 140rpx;
		text-align-last: justify;
	}

	.form .line input {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line radio-group label {
		margin-left: 30rpx;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.attention .title {
		height: 100rpx;
		line-height: 100rpx;
	}

	.attention .cont {
		color: #E33434;
		font-size: 28rpx;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx 30rpx 0 30rpx;
		height: 224rpx;
		z-index: 10;
		box-shadow: 3px -6px 9px 0px rgba(172, 196, 255, 0.13);

	}

	.radio-line {
		font-size: 20rpx;
		color: #B0B0B0;
	}

	.radio-line navigator {
		color: #347DFE;
	}

	.btn-box {
		padding-top: 40rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
